import { Box, Container, Button, Image, IconButton } from "@chakra-ui/react"
// import styled  from 'styled-components'
import { FaSignOutAlt } from "react-icons/fa"
import { BsFillPersonXFill } from "react-icons/bs"
import { css } from "@emotion/react"
import { BsSearch } from "react-icons/bs";


const logo = css`
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 140px;
`
export default function Header() {
  return (
    <Box height='60px' bgColor='#202020' borderBottom='1px solid #393939'>
    <Container height='60px' maxW={1200} pos='relative'>
      <Box height='60px' lineHeight='60px' borderLeft='1px solid #393939'
      borderRight='1px solid #393939' padding='0 6px' float='left'
      color='#fff' css={{
        '& > button:nth-of-type(1):after': {
          content: '""',
          width: '1px',
          height: '14px',
          background: '#fff',
          position: 'absolute',
          right: 0,
        }
      }} >
        <Button colorScheme='' leftIcon={<FaSignOutAlt />}>登录</Button>
        <Button colorScheme='' leftIcon={<BsFillPersonXFill />}>注册</Button>
      </Box>
      <Image css={logo} src="/images/logo.png" />
      <Box height='60px' lineHeight='60px' borderLeft='1px solid #393939'
      borderRight='1px solid #393939' padding='0 3px' float='right'>
        <IconButton colorScheme='' aria-label='Search database' icon={<BsSearch />} />
      </Box>
    </Container>
    </Box>
  )
}
